<template>
  <div>
    <h1>学习scss语法</h1>
    <div class="content">
      测试
    </div>
  </div>
</template>
<script>
export default {

}
</script>
<style lang="scss" scoped>
// scss中通过$声明变量
$border: 1px solid rgb(232, 12, 12);
h1{
    border: $border; // 使用变量来设置边框
    font-size: 18px;
}
.content {
    border: $border; // 使用变量来设置边框
    $width: 160px; // 局部变量，只能作用到当前样式范围内
    font-size: 16px;
    width: $width;
    &::before{ // & 表示父选择器，这里的&就表示.content这个类
      content: "+";
    }
}
// .content::before{
//   content: "+";
// }
</style>
